<template>
	<view class="container">
		<view class="list-item">
			<view class="dis-flex" style="flex-direction: row;padding: 22rpx;">
				<view class="font-w600" style="flex: 1;font-size: 34rpx;" @click="navTo('/pages/course/school?id='+info.campus_info.id+'&name='+info.campus_info.name)">{{info.campus_info.name}} ></view>
				<view class="order-status">{{info.status_tip}}</view>
			</view>
			<view class="dis-flex" @click="navTo('/pages/course/detail_text?id='+info.course_info.id)">
				<view class="list-img">
					<image :src="info.course_info.discover" mode="aspectFill"></image>
				</view>
				<view class="list-title">
					<view class="list-title-name">{{info.course_info.name}}</view>
					<view class="list-detail">
						<view style="flex: 1;width: 200rpx;">已上{{info.course_section_complete_info_count}}节/共{{info.course_section_info_count}}节</view>
						<view class="pad-r22">距您{{info.distance}}</view>
					</view>
					<view class="list-date">开课日期:{{info.course_info.course_time}}</view>
					<view class="list-op">
						<view class="font-w600">{{info.price}}</view>
						<view class="sign-coin-detail">
							签到最高可领{{info.course_info.score}}积分</view>
					</view>
				</view>
				
			</view>
			<view  class="line"></view>
			<view style="display: flex;margin: 24rpx;flex-direction: column;" class="font-s-14">
				<view class="dis-flex">
					<view style="flex:1">订单编号</view>
					<view><text class="font-color-9">{{info.order_sn}}</text><text class="font-color-9" style="margin: 0rpx 20rpx;">|</text><text @click="clipData(info.order_sn)">复制</text></view>
				</view>
				<view class="dis-flex margin-t-20">
					<view style="flex: 1;">下单时间</view>
					<view class="font-color-9">{{info.created_at}}</view>
				</view>
				<view class="dis-flex margin-t-20" v-if="info.status==2||info.status==3">
					<view style="flex: 1;">上课教室</view>
					<view class="font-color-9">{{info.course_info.class_room}}</view>
				</view>
				<view class="dis-flex margin-t-20" v-if="info.status==2||info.status==3">
					<view style="flex: 1;">上课时间</view>
					<view style="color:#0191FF ;">{{info.sksj}}</view>
				</view>
			</view>
		</view>
	
		<view class="dis-two-flex" v-if="info.status==2||info.status==3">
			<view class="turn-s">
				<view class="flex1">本人出勤</view>
				<view>{{had}}</view>			
			</view>
			<view class="turn-s">
				<view class="flex1">本人请假</view>
				<view>{{leave}}</view>			
			</view>
			<view class="turn-s">
				<view class="flex1">本人缺勤</view>
				<view>{{absence}}</view>			
			</view>
		</view>
		
		<view class="bg-white" style="margin-bottom: 130rpx;">
			<view class="course-name">课程目录</view>
			<view v-for="(item,index) in info.course_section_info" :key="index">
				<view class="two-col-w align-i-center">
					<view v-if="item.show_yuan_index==index" style="height: 12rpx;width: 16rpx;background: #0191FF;border-radius: 50%;"></view>
					<view v-else style="height: 12rpx;width: 16rpx;"></view>
					<view class="w-120 section">第{{item.serial_number}}节</view>
					<view class="section-list-name" :class="{'color-h':item.show_hui==1}">
						<text>{{item.name}}</text>
						<text class="leave-tag" :style="{backgroundColor:item.tag_color}">{{item.tag_show}}</text>
					</view>
				</view>
				<view class="section-date" :class="{'color-h':item.show_hui==1}">{{item.sk_time}}  {{item.begin_time}}-{{item.end_time}}</view>
			</view>
			
		</view>
		<view class="bottom-view">
			<view class="btn" @click="openDial()">课程咨询</view>
			<view class="btn" v-if="info.status==1||(info.status==2&&info.course_section_begin_count==0&&info.can_cancel==1)"  :disabled="disbaoming"  @click="cancelOrder()">取消报名</view>
			<view class="btn" v-if="info.status==2&&info.can_leave_section_list.length>0" :disabled="disbaoming2"  @click="showLeave()">上课请假</view>
			<view class="btn" v-if="info.status==2" style="color:#0191FF;border: 1px solid #0191FF;"   @click="goSign()">上课签到</view>
		</view>
		<uni-popup ref="popup"  background-color="#fff">
			<view class="popup-content">
				<view @click="makePhone()" style="height: 100rpx;">呼叫 {{info.campus_info.contact}}</view>
				<view @click="cancelPop()">取消</view>
			</view>
		</uni-popup>
		<uni-popup ref="leave_pop"  background-color="#fff" style="font-size: 24rpx;">
			<view style="display: flex;align-items: center;justify-content: center;padding: 20rpx 0rpx;">
				<view class="opt-btn" style="margin-left: 40rpx;text-align: left;" @click="cancelLeave()">取消</view>
				<view class="leave-title">请选择请假课节</view>	
				<view class="opt-btn" style="margin-right: 40rpx;text-align: right;" @click="okLeave()">确认</view>
			</view>
			
			<scroll-view scroll-y style="max-height: 500rpx;margin-bottom: 80rpx">
			<view v-for="(item,index) in info.can_leave_section_list" :key="index" @click="checkSection(item.id)">				
				<view>
				<view class="two-col-w align-i-center">
					<view class="section" style="width: 20%;">第{{item.serial_number}}节</view>
					<view class="leave-section-list-name" style="width: 75%;padding: 0rpx 20rpx;">{{item.name}}</view>
					<view style="width: 5%;margin-right: 30rpx;"><image v-if="leave_section==item.id" style="width: 34rpx;height: 25rpx;"  src="/static/temp/select.png"></image></view>
					
				</view>
				<view class="section-date color-h" >{{item.sk_time}}  {{item.begin_time}}-{{item.end_time}}</view>
				</view>
				
			</view>
			</scroll-view>
		</uni-popup>
		
	</view>
</template>

<script>
	import Api from '@/common/api';
	import { mapState } from 'vuex';  
	export default {
		
		data() {
			return {
				order_id:0,
				info:{},
				lat:'',
				lng:'',
				disbaoming:false,
				disbaoming2:false,
				had:0,
				leave:0,
				absence:0,
				leave_section:0
			}
		},
		
		onLoad(option) {
			this.order_id =option.id
			let loc = uni.getStorageSync('loc');
			if(loc!=''){
				this.lat=loc.lat;
				this.lng=loc.lng;
			}
			this.getDetail()
		},
		computed: {
			...mapState(['hasLogin','userInfo','user_role'])
		},
		methods: {
			checkSection(id){
				this.leave_section = id;
			},
			cancelLeave(){
				this.$refs.leave_pop.close();
			},
			async gateStatics(){
				let params = {course_id:this.info.course_id};
				let data = await Api.apiCall('get', Api.apiName.course_gate_statics, params,true);
				if (!data ||data.code!=0) {
					return;
				}
				this.had=data.data.had;
				this.leave=data.data.leave;
				this.absence=data.data.absence;
			},
			async getDetail() {
				let params = {
					o_id: this.order_id,
					lat:this.lat,
					lng:this.lng
				}
				let data = await Api.apiCall('get', Api.apiName.course_order_detail, params,true);
				if (!data || data.code != 0) {
					return;
				}
				this.info = data.data;
				uni.setNavigationBarTitle({
					title:data.data.status_tip
				});
				this.gateStatics()
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
				
			},
			goSign(){
				if(!this.hasLogin){
					uni.navigateTo({
						url:'/pages/pulic/wxLogin'
					})
					return;
				}
				uni.switchTab({
					url:'/pages/sign/index'
				})
			},
			
			clipData(c_data){
				uni.setClipboardData({
					data:c_data,
					showToast:true
				})
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.info.campus_info.contact
				})
			},
			openDial(){
				// console.log(this.$refs.popup[0],6666);return;
				this.$refs.popup.open('bottom')
				
			},
			cancelPop(){
				this.$refs.popup.close();
			},
			showLeave(){
				this.$refs.leave_pop.open('bottom')
			},
			okLeave(){
				if(this.leave_section==0){
					this.$api.msg(`请选择需要请假的章节`);return;
				}
				this.cancelLeave();
				this.addLeave();
			},
			cancelOrder(){
				this.disbaoming = true;
				let that = this;
				uni.showModal({
					title:'提示',
				    content: '确定取消报名吗?',
				    success: async (e)=>{
				    	if(e.confirm){
				    		let params = {
				    			o_id:that.info.id
				    		}
				    		let data = await Api.apiCall('post', Api.apiName.cancel_order_course, params);
							that.disbaoming =false;
							if (!data) { //出错时
								that.disbaoming =true;
								return;
							}
							if(!data.data){
								that.$api.msg(`取消报名失败`);
								return;
							}
							that.getDetail()
				    	}
				    }
				});
			},
			addLeave(){
				if(this.info.leave>=(this.info.course_section_info_count/2)){
					this.$api.msg(`请假课节已超一半，已禁止请假！`)
					return;
				}
				this.disbaoming2 = true;
				let that = this;
				uni.showModal({
					title:'确认下次课节请假?',
				    content: '注意！请假课节超过一半的，将不能再上该课程',
				    success: async (e)=>{
				    	if(e.confirm){
				    		let params = {
				    			o_id:that.info.id,
								s_id:that.leave_section
				    		}
				    		let data = await Api.apiCall('post', Api.apiName.add_leave, params);
							that.disbaoming2 =false;
							if (!data) { //出错时
								that.disbaoming2 =true;
								return;
							}
							that.$api.msg(`请假成功`);
							setTimeout(function(){
								that.getDetail()
							},2500)
							
							
				    	}
				    }
				});
			},
		},


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	
	.container {
		height: 100vh;
		overflow: auto;
	}
	.dis-flex{
		display: flex;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 24rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}
	
	.list-img {
		padding: 20rpx;
		image {
			display: inline-block;
			width: 230rpx;
			height: 230rpx;
			border-radius: 20rpx;
		}
	}
	
	.list-title {
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 14px;
		width:100%;
	}
	
	.list-title-name {
		font-size: 30rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 414rpx;
	}
	
	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}
	
	.list-date {
		color: #999999;
		margin-top: 24rpx
	}
	
	.list-op {
		margin-top: 24rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}
	.sign-coin-detail{
		margin-left: 14rpx;
		font-size: 20rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	.order-status{
		font-size: 30rpx;
		color:#999999;
	}
	
	.bg-white{
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 24rpx;
	}
	.two-col{
		display: flex;
		padding: 20rpx 0rpx;
	}
	.two-col-w{
		display: flex;
		padding: 20rpx 0rpx;
	}
	.course-name{
		font-size: 32rpx;
		font-weight: 600;
	}
	.align-i-center{
		align-items: center;
	}
	.w-120{
		width: 120rpx;
		// font-weight: 600;
	}
	.section{
		border: 1px solid #0191FF;
		padding: 4rpx;
		text-align: center;
		color:#0191FF;
		margin-left: 10rpx;
	}
	.section-list-name{
		overflow: hidden;
		text-overflow: ellipsis;
		// white-space: nowrap;
		margin-left: 48rpx;
		width: 636rpx;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		padding-right: 40rpx;
		position: relative;
	}
	.section-date{
		padding-left: 164rpx;
		color:#000000;
	}
	.line{
		height: 2rpx;
		background: #ECECEC;
		width: 90%;
		margin: 10rpx auto;
	}
	.font-s-14{
		font-size: 28rpx;
	}
	.margin-t-20{
		margin-top: 20rpx;
	}
	.font-color-9{
		color: #999999;
	}
	.dis-two-flex{
		display: flex;
		flex-direction: row;
		margin: 24rpx;
		justify-content: center;
	}
	.turn-s{
		background: #FFFFFF;
		display: flex;
		padding: 30rpx;
		width: 50%;
		border-radius: 20rpx;
		margin: 0rpx 4rpx;
		font-size: 26rpx;
	}
	.flex1{
		flex: 1;
	}
	.bottom-view{
		position: absolute;
		bottom: 0rpx;
		height: 100rpx;
		background: #f5f5f5;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	.btn{
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		border: 1px solid #999999;
		margin: 18rpx 20rpx 18rpx 10rpx;
		padding: 2rpx 16rpx;
		color: #000000;
		font-size: 26rpx;
	}
	.color-h{
		color: #999999;
	}
	.popup-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px;
		
		background-color: #fff;
	}
	.leave-title{
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		padding: 20rpx;
	}
	.opt-btn{
		flex: 1;
		font-size: 28rpx;
		// font-weight: 600;
	}
	.uni-pop .uni-popup__wrapper{
		border-top-left-radius:10rpx !important;
		border-top-right-radius:10rpx !important;
	}
	.leave-section-list-name{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
	}
	.leave-tag{
		position: absolute;
		bottom: 0rpx;
		padding: 2rpx 8rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		color: white;
		right: 0rpx;
	}
</style>